
import 'package:flutter/material.dart';

class SquarePage extends StatefulWidget {
  const SquarePage({Key key}) : super(key: key);

  @override
  _SquarePageState createState() => _SquarePageState();
}

class _SquarePageState extends State<SquarePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('圈子-广场'),
      ),
      body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            ///每一行显示多少个item
            crossAxisCount: 3,
            ///横轴方向子元素的间距，就是每一行 每个item的间距
            crossAxisSpacing: 10,
            ///主轴方向的间距,每一列 每个item的间距
            mainAxisSpacing: 50,
            ///宽高比例
            childAspectRatio: 1 / 1.4,
          ),
          children: [
            // gridItem('assets/images/shopping.png', '民生事爆料基地', '28.1万人关注'),
            // gridItem('assets/images/shopping2.png', '家里那点事儿', '8.6万人关注'),
            // gridItem('assets/images/shopping3.png', '情感热线', '23.7万人关注'),
            // gridItem('assets/images/shopping4.png', '这个颜值打几分', '9.6万人关注'),
            // gridItem('assets/images/shopping.png', '今天有什么不开心', '7.1万人关注'),
            // gridItem('assets/images/shopping2.png', '今天有什么好笑的', '22.6万人关注'),
            // gridItem('assets/images/shopping3.png', '看片吧', '30.1万人关注'),
            // gridItem('assets/images/shopping4.png', '世界足球风云', '12.6万人关注'),
            // gridItem('assets/images/shopping.png', '体坛早班车', '11.7万人关注'),

            gridItem('assets/images/shopping.png'),
            gridItem('assets/images/shopping.png'),
            gridItem('assets/images/shopping.png'),
            gridItem('assets/images/shopping.png'),
            gridItem('assets/images/shopping.png'),
          ]),
    );
  }

  Widget gridItem(String path) {
    return Container(
      // color: Colors.red,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Padding(
                padding: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  child: Image.asset(
                    path,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20, right: 22),
                child: Align(
                  alignment: Alignment.topRight,
                  child: Container(
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          )),
                      child: Icon(
                        Icons.add,
                        color: Colors.white,
                      )),
                ),
              ),
            ],
          ),
          Container(
            // color: Colors.pink,
            padding: EdgeInsets.only(left: 10),
            child: Text('今天怎么不开心'),
          ),
          Padding(
            padding: EdgeInsets.only(left: 10),
            child: Text('22万人已关注',style: TextStyle(color: Colors.grey,fontSize: 12),
          ))
        ],
      ),
    );
  }
}
